<template>
  <div id="app">
    <div id="cesiumContainer"></div>
    <Nav @clickMenu="menuChange" />
    <Main-left v-if="showLeftName == 'Main-left'" />
    <VideoTree v-if="showLeftName == 'VideoTree'" />
    <Main-right v-if="showRightName == 'Main-right'" />
    <!-- 设备管理 -->
    <SB-Main-left v-if="showLeftName == 'SB-Main-left'" />
    <SB-Main-right v-if="showRightName == 'SB-Main-right'" />
    <!-- 设备 -->
    <Management-Left v-if="showLeftName == 'Management-Left'" />
    <!-- 巡检 -->
    <Patrol-Management-Left v-if="showLeftName == 'Patrol-Management-Left'" />
    
    <Main-module />
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      loading: null,
      model: null,
      showRightName: "Main-right",
      showLeftName: "Main-left"
    };
  },
  components: {
    Nav: () => import("./components/nav"),
    VideoTree: () => import("./components/videoTree"),
    MainLeft: () => import("./components/mainLeft"),
    MainRight: () => import("./components/mainRight"),
    MainModule: () => import("./components/mainModule"),

    SBMainLeft: () => import("./components/sbgl/left/mainLeft"),
    SBMainRight: () => import("./components/sbgl/right/mainRight"),
    //设备管理
    ManagementLeft: () =>
      import("./components/DeviceManagement/left/mainLeft"),
      //巡检管理
    PatrolManagementLeft: () =>
      import("./components/PatrolManagement/left/mainLeft"),
  },
  mounted() {
    window.sgworld = new SmartEarth.SGWorld(
      "cesiumContainer",
      Cesium,
      {
        // url: "./static/earth.jpg",
        url: "./static/earth1.jpg"
      },
      null,
      function() {}
    );

    window.Viewer = sgworld._Viewer;
    sgworld.Navigate.Stop(); //取消飞行状态
    sgworld.Navigate.jumpTo({
      //跳转视角
      destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000)
    });

    var url = "http://183.162.245.49:82/xiaoxianMODEL/tileset.json";
    this.model = sgworld.Creator.create3DTilesets(
      "",
      url,
      {},
      {},
      "0",
      true,
      data => {
        this.flyto();
      }
    );
  },
  methods: {
    menuChange(index, type) {
      debugger
      if (type === "left") {
        switch (index) {
          case 0:
            this.showLeftName = "Main-left";
            this.showRightName = "Main-right";
            break;
          case 1:
            this.showLeftName = "VideoTree";
            this.showRightName = "none";
            break;
          case 2:
            this.showLeftName = "SB-Main-left";
            this.showRightName = "SB-Main-right";
            break;
        }
      } else {
        switch (index) {
          //巡检管理
           case 0:
            this.showLeftName = "Patrol-Management-Left";
            this.showRightName = "";
            break;
          case 2:
            this.showLeftName = "Management-Left";
            this.showRightName = "";
            break;
        }
      }
    },
    flyto() {
      if (this.model) {
        let boundingSphere = this.model.item.boundingSphere;
        Viewer.flyTo(this.model.item, {
          offset: new Cesium.HeadingPitchRange(
            0,
            -0.7,
            3 * boundingSphere.radius
          )
        });
      }
    }
  }
};
</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
}
</style>
